<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        
    </div>
    <input type="text" class="username" value="张三">
    <input type="text" class="input2" placeholder="请输入内容，自动生成页面"><button class="btn1">生成</button>
    <div class="box2">
        
    </div>

    <script>
        var box1 = document.getElementsByClassName('box1')[0];
        box1.innerText = '<h1>我是box1的内容</h1>';
        var usernameInput = document.getElementsByClassName('username')[0];
        usernameInput.value = '李四';
        var box2 = document.querySelector('.box2');
        //  box2.innerHTML = '<div class="inner-box"><form action="http://www.bufan.com">请输入银行卡密码：<input type="text"><button type="submit">提交</button></form></div>'

        var btn1 = document.querySelector('.btn1');
        var input2 = document.querySelector('.input2');
        btn1.onclick = function () {
            var value = input2.value;
            box2.innerHTML = value;
        }
    </script>
</body>
</html>